<template>
	<z-paging ref="paging" v-model="dataList" @query="queryList">
		<view class="container">
			<view class="search">
				<up-search placeholder="搜索" v-model="value" :show-action="false" :clearabled="true"
					@search="search"></up-search>
			</view>
			<view class="tab">
				<view class="itemTab" v-for="(item, index) in tabList" :key="index" @click="activeTab(index, item)"
					:style="{ width: `${100 / tabList.length}%` }">
					<view class="name">
						{{ item.name }}
					</view>
					<view class="borderActive">
						<view class="border" v-if="active == index"></view>
					</view>
				</view>
			</view>
			<view class="content">
				<view class="items" v-for="(item, index) in dataList" :key="index" @click="routerLink(item)">
					<view class="title">
						{{ item.title }}
					</view>
					<view class="time">

						<!-- <van-row>
							<van-col span="8">
								<span class="searve-tab-label">{{ item.issuing_authority }}</span>
							</van-col>
							<van-col span="8">
									<span class="searve-tab-label">{{ item.document_number }}</span>
							</van-col>
						</van-row> -->
						<!-- <van-row>
							<van-col span="24">
								<view class="mt-[5px]">
									<span class="searve-tab-label mr-[10px]">发文字号</span>
									<span class="searve-tab-label">{{ item.document_number }}</span>
								</view>
							</van-col>
						</van-row>
						<van-row>
							<van-col span="12">
								<view class="mt-[5px]">
									<span class="searve-tab-label mr-[10px]">发文时间</span>
									<span class="searve-tab-label">{{ formatTime(item.publish_date) }}</span>
								</view>
							</van-col>
						</van-row> -->
						<!-- <view> -->
							{{ formatTime(item.publish_date) }}
						<!-- </view> -->
					</view>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script>
import { getCategoryList, getArticleList } from '../../api/api.js';
import dayjs from 'dayjs';

export default {
	data() {
		return {
			value: '',
			dataList: [],
			tabList: [],
			active: 0,
			name: ''
		};
	},
	created() {
		getCategoryList({
			category_name: '政策服务'
		}).then((res) => {
			if (res.code == 2000) {
				this.tabList = res.data.data
				this.name = this.tabList[0].name
			}
		})
	},
	methods: {
		search(e) {
			this.queryList(1, 10)
		},
		routerLink(item) {
			uni.setStorageSync('currentData', { item: item, isTitle: false })
			uni.navigateTo({
				url: '/pages/contentDetail/index'
			})
		},
		activeTab(e, item) {
			this.active = e;
			this.name = item.name
			this.queryList(1, 10)
		},
		queryList(pageNo, pageSize) {
			// let data = [
			// 	{
			// 		name:'园区招商活动',
			// 		dateTime:'2024-11-11 11:11:11'
			// 	},
			// 	{
			// 		name:'园区招商活动2222',
			// 		dateTime:'2024-11-11 11:11:21'
			// 	}
			// ]
			getCategoryList({
				category_name: this.name,
				limit: pageSize,
				page: pageNo,
				title: this.value
			}).then((res) => {
				this.$refs.paging.complete(res.data.data);
			})

		},
		formatTime(time) {
			return dayjs(time).format('YYYY 年 MM 月 DD 日');
		},
	}
}
</script>

<style lang="scss">
.zp-paging-container {
	background-color: #f5f5f5;
}

.container {
	background-color: #f5f5f5;

	.search {
		padding: 18rpx 25rpx;
		background-color: #fefefe;
	}

	.tab {
		padding: 18rpx 25rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fefefe;

		.itemTab {
			text-align: center;

			.name {
				font-size: 30rpx;
				padding-bottom: 10rpx;
			}

			.borderActive {
				width: 100%;
				height: 10rpx;
				display: flex;
				justify-content: center;

				.border {
					text-align: center;
					width: 50rpx;
					height: 10rpx;
					background-color: #2297ff;
				}
			}

		}
	}

	.content {
		padding: 25rpx;

		.items {
			margin-bottom: 25rpx;
			padding: 25rpx;
			background-color: #fefefe;
			border-radius: 10rpx;

			// display: flex;
			// align-items: center;
			.title {
				font-size: 30rpx;
				// font-weight: bold;
				white-space: normal;
				overflow: visible;
				text-overflow: clip;
				line-height: 23px;
				// width: 80%;
			}

			.time {
				font-size: 26rpx;
				color: #989898;
				text-align: left;
				margin-top: 5px;
			}
		}

		.items:last-child {
			margin-bottom: 0;
		}
	}
}
</style>